<template>

  <div
    style="width:100%;height:298px;"
    id="singleLine"
  ></div>

</template>

<script>
import echarts from "echarts";

export default {
  name: "dataSourcesingleLine",
  props: {
    singleLineDataSource: {
      type: Object,
      default: function() {
        return {
          areaCount: 7,
          bdCount: 15,
          gcCount: 9
        };
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    singleLineDataSource(curVal, oldVal) {
      this.initEchats();
    }
  },
  mounted() {},
  methods: {
    initEchats() {
      var singleLineDataSource = echarts.init(
        document.getElementById("singleLine")
      );
      // 指定图表的配置项和数据
      var option = {
        //--------------    标题 title  ----------------
        title: {
          show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: "单位统计", //主标题文本，'\n'指定换行
          x: "center", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: "top", //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          backgroundColor: "rgba(0,0,0,0)", //标题背景颜色，默认'rgba(0,0,0,0)'透明
          borderColor: "#ccc", //标题边框颜色,默认'#ccc'
          borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
          padding: 15, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
          itemGap: 20, //主副标题纵向间隔，单位px，默认为10
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 24,
            fontStyle: "normal",
            fontWeight: "300",
            color: "#414141"
          },
          zlevel: 0, //一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
          z: 6 //二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
        },
        //--------------   提示框 -----------------
        tooltip: {
          show: true, //---是否显示提示框,默认为true
          trigger: "item", //---数据项图形触发
          axisPointer: {
            //---指示样式
            type: "shadow",
            axis: "auto"
          },
          padding: 5,
          textStyle: {
            color: "#fff"
          }
        },

        //-------------  grid区域  ----------------
        grid: {
          show: false, //---是否显示直角坐标系网格
          top: 70, //---相对位置，top\bottom\left\right
          left: "10%",
          right: "15%",
          containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
          tooltip: {
            //---鼠标焦点放在图形上，产生的提示框
            show: true,
            trigger: "item", //---触发类型
            textStyle: {
              color: "#fff"
            }
          }
        },

        //-------------   x轴   -------------------
        xAxis: {
          show: true, //---是否显示
          position: "bottom", //---x轴位置
          offset: 0, //---x轴相对于默认位置的偏移
          type: "category", //---轴类型，默认'category'
          name: "单位分类", //---轴名称
          nameLocation: "end", //---轴名称相对位置
          nameTextStyle: {
            //---坐标轴名称样式
            color: "#7f8081",
            padding: [5, 0, 0, -5] //---坐标轴名称相对位置
          },
          nameGap: 8, //---坐标轴名称与轴线之间的距离
          //nameRotate:270,           //---坐标轴名字旋转

          axisLine: {
            //---坐标轴 轴线
            show: true, //---是否显示

            //------------------- 箭头 -------------------------
            symbol: ["none", "arrow"], //---是否显示轴线箭头
            symbolSize: [8, 8], //---箭头大小
            symbolOffset: [0, 7], //---箭头位置

            //------------------- 线 -------------------------
            lineStyle: {
              color: "#7f8081",
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            //---坐标轴 刻度
            show: true, //---是否显示
            inside: true, //---是否朝内
            lengt: 3, //---长度
            lineStyle: {
              color: "#7f8081", //---默认取轴线的颜色
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            //---坐标轴 标签
            show: true, //---是否显示
            inside: false, //---是否朝内
            rotate: 0, //---旋转角度
            margin: 5 //---刻度标签与轴线之间的距离
            //color:'red',              //---默认取轴线的颜色
          },
          splitLine: {
            //---grid 区域中的分隔线
            show: false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
            lineStyle: {
              //color:'red',
              //width:1,
              //type:'solid',
            }
          },
          splitArea: {
            //--网格区域
            show: false //---是否显示，默认false
          },
          data: ["地区", "联网单位", "子单位"] //内容
        },

        //----------------------  y轴  ------------------------
        yAxis: {
          show: true, //---是否显示
          position: "left", //---y轴位置
          offset: 0, //---y轴相对于默认位置的偏移
          type: "value", //---轴类型，默认'category'
          name: "数量", //---轴名称
          nameLocation: "end", //---轴名称相对位置value
          nameTextStyle: {
            //---坐标轴名称样式
            color: "#7f8081",
            padding: [5, 0, 0, 5] //---坐标轴名称相对位置
          },
          nameGap: 15, //---坐标轴名称与轴线之间的距离
          //nameRotate:270,           //---坐标轴名字旋转

          axisLine: {
            //---坐标轴 轴线
            show: true, //---是否显示

            //------------------- 箭头 -------------------------
            symbol: ["none", "arrow"], //---是否显示轴线箭头
            symbolSize: [8, 8], //---箭头大小
            symbolOffset: [0, 7], //---箭头位置

            //------------------- 线 -------------------------
            lineStyle: {
              color: "#7f8081",
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            //---坐标轴 刻度
            show: true, //---是否显示
            inside: true, //---是否朝内
            lengt: 3, //---长度
            lineStyle: {
              color: "#7f8081", //---默认取轴线的颜色
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            //---坐标轴 标签
            show: true, //---是否显示
            inside: false, //---是否朝内
            rotate: 0, //---旋转角度
            margin: 8 //---刻度标签与轴线之间的距离
            //color:'red',              //---默认取轴线的颜色
          },
          splitLine: {
            //---grid 区域中的分隔线
            show: true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
            lineStyle: {
              color: "#d2d2d2",
              width: 1,
              type: "dashed" //---类型
            }
          },
          splitArea: {
            //--网格区域
            show: false //---是否显示，默认false
          }
        },

        //------------ 内容数据  -----------------
        series: [
          {
            name: "单位", //---系列名称
            type: "bar", //---类型
            itemStyle: {
              normal: {
                color: function(params) {
                  // build a color map as your need.
                  var colorList = [
                    "#ff8346",
                    "#ff6e27",
                    "#feb900",
                    "#E87C25",
                    "#27727B",
                    "#FE8463",
                    "#9BCA63",
                    "#FAD860",
                    "#F3A43B",
                    "#60C0DD",
                    "#D7504B",
                    "#C6E579",
                    "#F4E001",
                    "#F0805A"
                  ];
                  return colorList[params.dataIndex];
                },
                label: {
                  show: true,
                  position: "top",
                  formatter: "{b}\n{c}"
                }
              }
            },
            legendHoverLink: true, //---是否启用图例 hover 时的联动高亮
            label: {
              //---图形上的文本标签
              show: false,
              position: "insideTop", //---相对位置
              rotate: 0, //---旋转角度
              color: "#fff"
            },
            barWidth: "20", //---柱形宽度
            barCategoryGap: "20%", //---柱形间距
            data: [
              this.singleLineDataSource.areaCount,
              this.singleLineDataSource.bdCount,
              this.singleLineDataSource.gcCount
            ]
          }
        ]
      };
      singleLineDataSource.setOption(option);
      window.addEventListener("resize", function() {
        singleLineDataSource.resize();
      });
    }
  }
};
</script>
